<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta content="yes" name="apple-mobile-web-app-capable"/> 	
<meta content="yes" name="apple-touch-fullscreen"/> 
<meta content="telephone=no,email=no" name="format-detection"/>
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>
<title>全新奥迪A4L</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/swiper-3.3.1.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/remChange.js"></script>
<script src="js/jquery-1.7.2.js"></script>
<script src="js/swiper-3.3.1.min.js"></script>
<script src="js/kazu_common.js"></script>
<script src="shop.js"></script>
<script>
	window.onload=function (){
		var oVdo=document.getElementById('vdo');
		var oVpage=document.getElementById('vPag');
		var oVback=document.getElementById('vback');
		/*var oSback=document.getElementById('sback');*/
		var oTry=document.getElementById('try');
		var oForm2=document.getElementById('form');
		var oFback=document.getElementById('fback');
		oVdo.onclick=function (){
			oVpage.style.display='block';
		};
		oVback.onclick=function (){
			oVpage.style.display='none';
		};
		oTry.onclick=function (){
			oForm2.style.display='block';
		};
		oFback.onclick=function (){
			oForm2.style.display='none';
		};
		/*oSback.onclick=function (){
			window.location.reload();
			 history.go(0);
			location.reload();  
			location.assign(location); 
			document.execCommand('Refresh'); 
			location.replace(location); 
			document.URL=location.href; 
		};*/
		
		var oForm=document.getElementById('myform');
		var aSpan=oForm.getElementsByTagName('span');
		var aInp=document.getElementsByName('sex');
		
		for (var i=0; i<aSpan.length; i++)
		{
			(function (index){
				aSpan[i].onclick=function (){
					for (var i=0; i<aSpan.length; i++)
					{
						aSpan[i].className='';
					}
		
					this.className='active';
					aInp[index].checked=true;
				};
			})(i);
		}
		
	};
</script>
<script>
$(function (){
	$('#check').toggle(function (){
		$('#check')[0].className='no-agree';
		$('#yy').removeAttr('checked');
	},function (){
		$('#check')[0].className='agree';
		$('#yy').attr("checked",'checked');
	});
	$("#sback").click(function(){
        location.href="index.html";
   });

});
</script>
</head>

<body>
	<div class="bg-pic6" id="form">
		<form class="myForm" id="myform">
			<input type="text" placeholder="请填写姓名" class="name" id="name" name="name">
			<span id="sex_b" class="active"></span><span id="sex_g"></span>
			<input type="radio" name="sex" value="男" class="sex-bg">
			<input type="radio" name="sex" value="女"  class="sex-bg">
			<input type="text" placeholder="请填写手机号码" class="phone" id="phone" name="phone" >
			<select class="car" id="type" name="carType">
				<option>A4L</option>
			</select>
			<select class="province" id="province" onchange="getShi('city',this.value)" name="province">
				<option>省份</option>
			</select>
			<select class="city" id="city" onchange="getShop('dealer',this.value)" name="city">
				<option>城市</option>
			</select>
			<select class="dealer" id="dealer" name="dealer">
				<option>请选择经销商</option>
			</select>
			<select class="time" id="type_jh" name="carType">
				<option>请选择计划购车时间</option>
				<option>3个月内</option>
				<option>4至6个月</option>
				<option>7个月到一年内</option>
				<option>一年以上</option>
				<option>不确定</option>
			</select>
			<input type="checkbox" checked="" id="yy" name="all_val" class="check"><i class="agree" id="check"></i>
			<div class="sub" id="submit" ></div>
			<div class="sub2" id="fback" ></div>
		</form>
	</div>
	<!--视频页-->
	<div class="bg-pic7" id="vPag">
		<div class="video1"><video src="" poster="images/v_pic1.png" controls id="video1" ></video></div>
		<div class="video2"><video src="" poster="images/v_pic2.png" controls id="video2" ></video></div>
		<div class="video3"><video src="" poster="images/v_pic3.png" controls id="video3" ></video></div>
		<div class="video4"><video src="" poster="images/v_pic4.png" controls id="video4" ></video></div>
		<div class="video5"><video src="" poster="images/v_pic5.png" controls id="video5" ></video></div>
		<div class="v_back" id="vback"></div>
	</div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
		<!--第一页-->
            <div class="swiper-slide bg-pic1" >
				<div class="index-arrow-bottom"></div>
			</div>
		<!--第二页-->
            <div class="swiper-slide bg-pic2">
				<div class="index-arrow-bottom"></div>
			</div>
		<!--第三页-->
            <div class="swiper-slide bg-pic3">
				<div class="index-arrow-bottom"></div>
			</div>
		<!--第四页-->
            <div class="swiper-slide bg-pic4">
				<div class="index-arrow-bottom"></div>
			</div>
		<!--第五页-->
            <div class="swiper-slide bg-pic5">
				<div class="bg5-cot1" id="vdo"></div>
				<div class="bg5-cot2" id="try"></div>
				<div class="bg5-cot3" id="sback"></div>
			</div>
        </div>
        <!--<div class="swiper-pagination"></div>-->
    </div>
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical'
    });
    </script>
	
	<script>
getSheng("province");
	$(function(){
		var cal=document.getElementsByName('all_val')[0];
		
		$('#submit').click(function(){
		var username=trim(jQuery("#name").val());
		var mobile=trim(jQuery("#phone").val());
		var sex_name=trim(jQuery(".sex-bg").val());
		//var sex_name=jQuery('select#sex option:selected').text(); //性别
		var agency_name=jQuery('select#dealer option:selected').text();//jingxiaoshang
		var car_name=jQuery('select#type option:selected').text();//chexing
		var city_name=jQuery('select#province option:selected').text();//sheng
		var area_name=jQuery('select#city option:selected').text();//shi
		var jh_time=jQuery('select#type_jh option:selected').text();//计划购车时间
		
		if(isEmpty(username)){
			alert("请输入您的姓名！");
			return;
		}
		if(username.length<2 || username.length>8){
					alert("用户名长度在2~8位之间!");
			return;
		}
		if(/[^\u4E00-\u9FA5]/g.test(username) ){
			alert("姓名只能是汉字！");
			return;
		}
		
		/*if(sex_name=="" || sex_name == "您的性别"){
			alert("请选择性别！");
			return;
		}*/
		
		if(isEmpty(mobile)){
			alert("请填写手机号码！");
			return;
		}else if(!checkMobile(mobile)){
			alert("手机号码不正确！");
			return;
		}
		
		if(car_name=="" || car_name == "请选择车型"){
			alert("请选择试驾车型！");
			return;
		}
		
		if(city_name == ""  || area_name == "" || city_name == "省份"  || area_name == "城市"){
			alert("地区不能为空！");
			return;
		}	
		if(agency_name=="" || agency_name == "请选择经销商"){
			alert("请选择经销商！");
			return;
		}
		if(jh_time=="" || jh_time == "请选择计划购车时间"){
			alert("请选择计划购车时间！");
			return;
		}	
		
		if (!cal.checked){
			alert("请同意经销商联系！");		
			return;
		}else
		{
			alert('正在提交，请稍等！');	
		}
		
		jQuery.ajax({
			/*contentType:"application/x-www-form-urlencoded;charset=utf-8",*/
			url: "http://share.pcmglobe.com/info-collection/getinfo.php",
			type: "post",
			dataType: "json",
			data:'{"project_name":"A4L","username":"'+username+'","sex_name":"'+sex_name+'","mobile":"'+mobile+'","car_name":"'+car_name+'","agency_name":"'+agency_name+'","city_name":"'+city_name+'","area_name":"'+area_name+'","jh_time":"'+jh_time+'"}',
			success: function (data) {  
				 if ( data == 0 ){
				alert("您的手机号已参加活动！"); 
				}
				else
				{
					  alert("提交成功");
					   reset(); 
				}   
             },
			 error: function () {
				 alert('提交失败');  
			 }
		});
		
		function reset(){
			$('#name').val(''),    
             //$('#sex').val(''),
			 $('#phone').val(''),
			 $('#type').val(''),
			 $('#province').val(''),
			 $('#city').val(''),
			 $('#dealer').val(''),
			 $('#type_jh').val('')
		}
		
		});
  });
</script>
</body>
</html>
